<template>
  <!-- 服务时间 -->
  <view class="historyDetailContainer">
    <cunstom_navigation_bar :tapEvent="goback" :title="`服务时间`" :propStyles="propStyles">
    </cunstom_navigation_bar>
    <view class="contentBox">

      <calendar class="uni-calendar--hook" :selected="info.selected" :showMonth="false" @change="change"
        :startDate="startDate" @monthSwitch="monthSwitch" />
      <view @tap="showPopup" class="showPopup">
        <view class="left">
          <image src="https://visionmpapi.jiuerjindi.com/upload/mp/cookDetail/timer.svg"></image> 具体时间
        </view>
        <view>{{pickerTime}}></view>
      </view>
      <!-- <view v-if="hasTime" class="uni-date-changed popup-x-header"> -->
      <!-- :start="timepickerStartTime" :end="timepickerEndTime" -->
        <time_picker ref="timePicker"  type="time" v-model="pickerTime" :border="false" :disabled="!inputDate"
        :hideSecond="hideSecond" style="width: 100%;">
        <input class="notShow"   type="text" v-model="pickerTime" :placeholder="selectTimeText" />
      </time_picker>  
      <!-- </view> -->

      <!-- <uni-datetime-picker type="datetime" :clear-icon="false" v-model="pickUpTime" :start="'{{startDate}}'"
      @change="chooseTime">
      {{pickUpTime?pickUpTime:'请选择自提时间 >'}}
    </uni-datetime-picker> -->

    </view>
    <view class="zhanwei">

    </view>
    <view class="fixBar" @tap="save">
      <image src="https://visionmpapi.jiuerjindi.com/upload/mp/cookDetail/booking.png"></image>
    </view>



  </view>
  </view>
</template>
<script>
  const app = getApp();
  export default {
    data() {
      return {
        pickerTime: '11:11',
        hasTime: false,
        info: {
          lunar: true,
          range: true,
          insert: false,
          selected: []
        },
        pickUpTime: '',
        datetimesingle: '',
        hideSecond: true,
        selectedIndex: 3,
        startDate: '',
        propStyles: {
          iconSrc: "yellow",
          zhanweiColor: '#FFFFFF',
          txtColor: '#333333',
          bgColor: 'transparent',
          // bgSrc: "https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/static/index/bg1.png",
          // bgSrc1: "https://wx.widelink.net:8443/culturalRelicsCoding-uniapp/static/index/bg2.png"
        },
		dateValue:'',
      }


    },
    watch: {
      pickerTime: {
        immediate: true,
        handler(newVal) {
          console.log('父组件pickerTime', newVal);
		  this.pickerTime = newVal;
        }
      },

    },
    computed: {
      // timepickerStartTime() {
      // 	const activeDate = this.isRange ? this.tempRange.startDate : this.inputDate
      // 	return activeDate === this.calendarRange.startDate ? this.calendarRange.startTime : ''
      // },
      // timepickerEndTime() {
      // 	const activeDate = this.isRange ? this.tempRange.endDate : this.inputDate
      // 	return activeDate === this.calendarRange.endDate ? this.calendarRange.endTime : ''
      // },
    },
    methods: {
      showPopup() {
        this.$refs.timePicker.initTimePicker()
      },
      chooseTime() {

      },
      getToday() {

        let date = new Date()
        const year = date.getFullYear()
        const month = date.getMonth() + 1
        const day = date.getDate()
        return `${year}-${this.addZero(month)}-${this.addZero(day)}`
      },
      addZero(num) {
        if (num < 10) {
          num = `0${num}`
        }
        return num
      },
      open() {
        this.$refs.calendar.open()
      },
      close() {
        console.log('弹窗关闭');
      },
      change(e) {
        console.log('change 返回:', e)
		this.startDate = e.year+'-'+e.month+'-'+e.date;
        // 模拟动态打卡
        if (this.info.selected.length > 5) return
        this.info.selected.push({
          date: e.fulldate,
          info: '迁到'
        })
      },
      confirm(e) {
        console.log('confirm 返回:', e)
      },
      monthSwitch(e) {
        console.log('monthSwitchs 返回:', e)
      },
      /**
	   * 获取任意时间
	   */
      getDate(date, AddDayCount = 0) {
        if (!date) {
          date = new Date()
        }
        if (typeof date !== 'object') {
          date = date.replace(/-/g, '/')
        }
        const dd = new Date(date)

        dd.setDate(dd.getDate() + AddDayCount) // 获取AddDayCount天后的日期

        const y = dd.getFullYear()
        const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1 // 获取当前月份的日期，不足10补0
        const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate() // 获取当前几号，不足10补0
        return {
          fullDate: y + '-' + m + '-' + d,
          year: y,
          month: m,
          date: d,
          day: dd.getDay()
        }
      },

      goback() {
        uni.navigateBack()
      },
      changeIndex(index) {
        this.selectedIndex = index
      },
	  save(){
		  let cookTime = this.startDate + ' ' + this.pickerTime;
		  console.log("->cookTime:" + cookTime);
		  
		  uni.setStorageSync('cookTime', cookTime); // 存到缓存中
		  uni.navigateBack ({
		      url: `/page_bookDetail/bookDetail`,
		  })
	  }
    },
    onReady() {

    },

    onLoad: function (option) { //option为object类型，会序列化上个页面传递的参数


      this.startDate = this.getToday()


    },





  };

</script>

<style lang="scss">
  .contentBox {
    .topBg {
      image {
        width: 100%;
      }
    }

    .showPopup {
      margin-top: 10*2rpx;
      width: 375*2rpx;
      height: 61*2rpx;
      border-radius: 10*2rpx;
      opacity: 1;
      background: #FFFFFF;
      /* 阴影/低阴影 */
      box-shadow: 0rpx 3*2rpx 8*2rpx 0rpx rgba(0, 0, 0, 0.16);
      text-align: center;
      line-height: 61*2rpx;
      font-size: 14*2rpx;
      color: #333333;
      font-weight: 500;
      display: flex;
      align-items: center;
      padding:0rpx 30rpx;
      justify-content: space-between;
      .left{
        display: flex;
        align-items: center;
      }
      image {
        width: 24*2rpx;
        height: 24*2rpx;
        margin-right: 10*2rpx;
      }
    }
    .notShow{
      color: transparent;
    }


    .content {
      width: 100%;



    }
  }

  .zhanwei {
    width: 750rpx;
    height: 172rpx;
  }

  .fixBar {

    align-items: center;
    position: fixed;
    bottom: 0rpx;
    left: 0rpx;
    width: 750rpx;
    height: 172rpx;
    background-color: #ffffff;
    display: flex;
    justify-content: center;
    box-shadow: 0px -5px 20px 0px rgba(0, 0, 0, 0.15);
    border-radius: 68rpx 68rpx 0px 0px;

    image {
      width: 342*2rpx;
      height: 69*2rpx;
    }






  }

  ::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    color: transparent;
  }
</style>